<template>
  <div class="overview">
    <div
      class="right_all"
      style="z-index: 2;"
      @click="lookAll"
      v-if="currentIndex == 1 && crtShowVideoList?.length > 0"
    >
      查看全部
    </div>
    <div
      class="right_all right_generate"
      v-if="
        currentIndex == 1 && generateLoading && crtShowVideoList?.length <= 20
      "
    >
      <span style="--i: 1">还</span>
      <span style="--i: 2">有</span>
      <span style="--i: 3">视</span>
      <span style="--i: 4">频</span>
      <span style="--i: 5">生</span>
      <span style="--i: 6">成</span>
      <span style="--i: 7">中</span>
      <span style="--i: 8">.</span>
      <span style="--i: 9">.</span>
      <span style="--i: 10">.</span>
    </div>
    <div class="tab_con">
      <div
        class="tab_item"
        :class="currentIndex == index ? 'active' : ''"
        @click="tabChange(index)"
        v-for="(item, index) in tabList"
        :key="index"
      >
        {{ item.tab_name }}
      </div>
    </div>
    <div class="main_con">
      <component :is="tabList[currentIndex].key" />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
import editingOverview from "./modules/editingOverview.vue";
import combinationOverview from "./modules/combinationOverview.vue";
import store from "@/store";
export default defineComponent({
  components: {
    editingOverview,
    combinationOverview,
  },
  setup(props, context) {
    const generateLoading = computed(
      () => store.state.shotstack?.generateLoading
    );
    const state = reactive({
      currentIndex: 0,
      tabList: [
        { tab_name: "剪辑概览", key: "editingOverview" },
        { tab_name: "组合预览", key: "combinationOverview" },
      ],
    });
    const tabChange = (index) => {
      if (state.currentIndex == index) return;
      state.currentIndex = index;
    };
    const crtShowVideoList = computed(() => store.getters.crtShowVideoList);

    const lookAll = () => {
      context.emit("lookAll");
    };

    return {
      lookAll,
      ...toRefs(state),
      tabChange,
      generateLoading,
      crtShowVideoList,
    };
  },
});
</script>

<style lang="less" scoped>
.overview {
  width: 100%;
  min-height: 100%;
  background-color: rgba(30, 30, 32, 0.9);
  padding: 15px;
  position: relative;
  .right_all {
    position: absolute;
    right: 40px;
    top: 20px;
    cursor: pointer;
    color: rgb(255, 255, 255);
    &:hover {
      color: #2878FFff;
    }
  }
  .right_generate {
    left: 270px;
    color: var(--ss-primary-color);
    > span {
      margin-top: 6px;
      display: inline-block;
      animation: dongHua 1.5s ease-in-out infinite;
      animation-delay: calc(0.1s * var(--i));
    }
  }

  @keyframes dongHua {
    0% {
      transform: translateY(0px);
    }
    20% {
      transform: translateY(-10px);
    }
    40%,
    100% {
      transform: translateY(0px);
    }
  }

  .tab_con {
    display: flex;
    width: 240px;
    font-size: 14px;
    border-radius: 8px;
    color: #b9bbc1;
    padding: 2px;
    border: 1px solid #3e3d3f;
    justify-content: space-between;
    .tab_item {
      width: 50%;
      padding: 8px 26px;
      border-radius: 6px;
      transition: all 0.3s;
      cursor: pointer;
      &.active {
        color: #fff;
        background-color: #3e3e3e;
      }
    }
  }

  .main_con {
  }
}
</style>
